'use client'
import styles from '@/styles/LeftSidebar.module.css';
import Icon from  "@/components/icon/Icon"
import { useState } from 'react';
import type { IconPrefix, IconName } from '@fortawesome/fontawesome-svg-core';
// 定义菜单项类型
interface MenuItem {
    id: number; // 唯一标识
    icon: string; // FontAwesome 图标名称
    text: string; // 菜单项文本
}

// 定义分类类型
interface Category {
    id: number; // 唯一标识
    icon: string; // 分类图标
    title: string; // 分类标题
    items: MenuItem[]; // 分类下的菜单项
}

export default function Sidebar() {
    const [collapsed, setCollapsed] = useState<boolean>(false);
    // 新增：记录当前选中项的 id
    const [selectedItemId, setSelectedItemId] = useState<number | null>(null);

    // 菜单数据（类型化）
    const categories: Category[] = [
        {
            id: 1,
            icon: 'fire',
            title: '热门主题',
            items: [
                { id: 1, icon: 'bolt', text: '新能源需求上涨' },
                { id: 2, icon: 'oil-well', text: '石油战争' },
                { id: 3, icon: 'medal', text: '黄金再涨' },
            ],
        },
        {
            id: 2,
            icon: 'tags',
            title: '行业分类',
            items: [
                { id: 4, icon: 'industry', text: '制造业' },
                { id: 5, icon: 'wind', text: '可再生能源' },
                { id: 6, icon: 'ship', text: '运输业' },
            ],
        },
    ];

    // 切换侧边栏状态
    const toggleSidebar = () => {
        setCollapsed(prev => !prev);
    };

    // 新增：处理菜单项点击事件
    const handleItemClick = (itemId: number) => {
        setSelectedItemId(itemId);
    };

    return (
        <div className={`${styles.sidebar} ${collapsed ? styles.collapsed : ''}`}>
            <div className={styles['sidebar-header']}>
                <div
                    className={styles['sidebar-toggle']}
                    onClick={toggleSidebar}
                    aria-label={collapsed ? '展开侧边栏' : '折叠侧边栏'}
                >
                    <Icon icon={['fas', collapsed ? 'angle-right' : 'angle-left']} className={styles['icon']} />
                </div>
                <h2 className={`${styles['sidebar-title']} ${collapsed ? styles.hidden : ''}`}>
                    市场动态
                </h2>
            </div>
            <div className={styles['sidebar-menu']}>
                {categories.map((category) => (
                    <div className={styles['menu-category']} key={category.id}>
                        <div className={styles['category-header']}>
                            <Icon
                                icon={['fas', category.icon] as [IconPrefix, IconName]}
                                className={styles['category-icon']}
                                aria-hidden="true"
                            />
                            <span className={`${styles['category-title']} ${collapsed ? styles.hidden : ''}`}>
                                {category.title}
                            </span>
                        </div>
                        <div className={styles['category-items']}>
                            {category.items.map((item) => (
                                <div
                                    className={`${styles['menu-item']} ${selectedItemId === item.id ? styles.active : ''}`}
                                    key={item.id}
                                    role="button"
                                    tabIndex={0}
                                    onClick={() => handleItemClick(item.id)}
                                    onKeyDown={(e) => {
                                        if (e.key === 'Enter' || e.key === ' ') {
                                            handleItemClick(item.id);
                                        }
                                    }}
                                >
                                    <Icon
                                        icon={['fas', item.icon] as [IconPrefix, IconName]}
                                        className={styles['item-icon']}
                                        aria-hidden="true"
                                    />
                                    <span className={`${styles['item-text']} ${collapsed ? styles.hidden : ''}`}>
                                        {item.text}
                                    </span>
                                </div>
                            ))}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}